<div class="toolbar">
  <i class="fa fa-square-o fa-lg tool-btn btn-toggle" data-toggle="tooltip" title="focus on"></i>
  <i class="feature-name"><a name="filter">Filter is awesome</a></i>
  <i class="fa fa-star-half-o fa-lg" data-toggle="tooltip" title="difficulty coefficient"></i>
</div>
<p class="bg-info example-heading">filter</p>
<div ng-controller="FilterCtrl">
  <div class="input-group">
    <span class="input-group-addon"><i class="fa fa-thumbs-o-up fa-lg"></i></span>
    <input type="text" class="form-control" placeholder="Candidate" ng-model="keyword">
  </div>
  <ul>
    <li ng-repeat="candidate in candidates | orderBy: 'name' | filter: keyword">
      {{ candidate.name }} from {{ candidate.major }}
    </li>
  </ul>
</div>
<script type="text/javascript">
  var filterApp = angular.module('filterApp', []);
  filterApp.controller('FilterCtrl', function($scope) {
    $scope.candidates =
      [{name:'Sebastiane', major:'Philosophy'},
       {name:'Wendy', maior:'Mathematics'},
       {name:'Mike', major:'Economics'},
       {name:'Adam', major:'Computer Science'},
       {name:'Barton', maior:'Electronics'},
       {name:'Clark', major:'Accountancy'},
       {name:'Emma', major:'Mechanical Engineering'},
       {name:'George', maior:'Communications'},
       {name:'Mike', major:'Civil Engineering'},
       {name:'Marina', major:'Human Resources'},
       {name:'Julia', major:'Tourism Science'},
       {name:'Donald', major:'Politics'}];
  });
</script>
<hr>
<p class="bg-success code-heading">html source code</p>
<pre>
  <code class="html" ng-non-bindable>
&lt;div ng-controller=&quot;FilterCtrl&quot;&gt;
  &lt;div class=&quot;input-group&quot;&gt;
    &lt;span class=&quot;input-group-addon&quot;&gt;&lt;i class=&quot;fa fa-thumbs-o-up fa-lg&quot;&gt;&lt;/i&gt;&lt;/span&gt;
    &lt;input type=&quot;text&quot; class=&quot;form-control&quot; placeholder=&quot;Candidate&quot; ng-model=&quot;keyword&quot;&gt;
  &lt;/div&gt;
  &lt;ul&gt;
    &lt;li ng-repeat=&quot;candidate in candidates | orderBy: 'name' | filter: keyword&quot;&gt;
      {{ candidate.name }} from {{ candidate.major }}
    &lt;/li&gt;
  &lt;/ul&gt;
&lt;/div&gt;
  </code>
</pre>
<p class="bg-success code-heading">javascript source code</p>
<pre>
  <code class="javascript">
var filterApp = angular.module('filterApp', []);
filterApp.controller('FilterCtrl', function($scope) {
  $scope.candidates =
    [{name:'Sebastiane', major:'Philosophy'},
     {name:'Wendy', maior:'Mathematics'},
     {name:'Mike', major:'Economics'},
     {name:'Adam', major:'Computer Science'},
     {name:'Barton', maior:'Electronics'},
     {name:'Clark', major:'Accountancy'},
     {name:'Emma', major:'Mechanical Engineering'},
     {name:'George', maior:'Communications'},
     {name:'Mike', major:'Civil Engineering'},
     {name:'Marina', major:'Human Resources'},
     {name:'Julia', major:'Tourism Science'},
     {name:'Donald', major:'Politics'}];
});
  </code>
</pre>